<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
            background: url(./images/background.jpg) no-repeat;
            background-size: 100% 100%;
        }
        
        .lamps {
            position: absolute;
            left: 60px;
            /* transform: translateX(-50%); */
            top: 170px;
        }
        
        .lamps_1 {
            left: 440px;
        }
        
        .box {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 577px;
            width: 600px;
            background: url(./images/bk.png) no-repeat;
            background-size: 100% 100%;
        }
        
        .lamp {
            width: 100px;
            min-height: 100px;
            position: relative;
            /* border: 1px solid black; */
            margin-top: 30px;
            transform-origin: top;
            animation: move 5s 1s infinite;
        }
        
        .lamp .lamp_1 {
            height: 100px;
            width: 50px;
            background-color: rgb(253, 253, 36);
            border-radius: 10px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 2px 0px 5px rgb(68, 55, 55), 0px 0px 10px wheat inset;
        }
        
        .lamp .lamp_2 {
            width: 100px;
            height: 75px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50px;
            background-color: red;
            box-shadow: 0px 0px 50px red, 0px 0px 10px wheat inset;
            overflow: hidden;
        }
        
        .lamps .lamp_3 {
            height: 100px;
            width: 2px;
            background-color: black;
            opacity: .7;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
        }
        
        .lamp .border_1,
        .lamp .border_2 {
            height: 80px;
            width: 80px;
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid black;
            opacity: .5;
            border-radius: 50%;
        }
        
        .lamp .lamp_2 span {
            display: block;
            font-size: 40px;
            line-height: 75px;
            text-align: center;
        }
        
        .lamp .border_2 {
            width: 50px;
        }
        
        .content {
            width: 400px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
            box-shadow: 0px 0px 10px black, 0px 0px 5px black inset;
            background-color: salmon;
            font-size: 75px;
            line-height: 100px;
            text-align: center;
            margin: 50px auto;
        }
        
        button {
            height: 50px;
            width: 150px;
            font-size: 20px;
            border: 2px solid red;
            border-radius: 5px;
            background-color: salmon;
            cursor: pointer;
            opacity: .7;
            box-shadow: 0px 0px 10px black;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(10deg);
            }
            50% {
                transform: rotate(0deg);
            }
            75% {
                transform: rotate(-10deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 灯笼1 -->
        <div class="lamps">
            <!-- 线 -->
            <div class="lamp_3">
            </div>

            <div class="lamp">
                <!-- 主体 金色矩形框-->
                <div class="lamp_1">
                </div>
                <!-- 红色椭圆 -->
                <div class="lamp_2">
                    <!-- 灯笼里的线 -->
                    <div class="border_1"></div>
                    <div class="border_2"></div>
                    <span>福</span>
                </div>
            </div>

        </div>
        <!-- 灯笼2 -->
        <div class="lamps lamps_1">
            <!-- 线 -->
            <div class="lamp_3">
            </div>

            <div class="lamp">
                <!-- 主体 金色矩形框-->
                <div class="lamp_1">
                </div>
                <!-- 红色椭圆 -->
                <div class="lamp_2">
                    <!-- 灯笼里的线 -->
                    <div class="border_1"></div>
                    <div class="border_2"></div>
                    <span>虎</span>
                </div>
            </div>

        </div>

        <!-- 祝福语框 -->
        <div class="content">

        </div>
        <button>点击抽取祝福语</button>
    </div>
    <script>
        let oBtn = document.querySelector('button');
        let oCont = document.querySelector('.content');

        let flag = false;
        let arr = ["虎虎生威", "虎年大吉", "万事如意", "心想事成", "生龙活虎", "福虎生旺", "虎气十足", "虎兆丰年", "金虎送喜"];
        oCont.innerHTML = arr[0];
        let num = 0;

        //定时器让祝福语随机
        set();

        function set() {
            t = setInterval(function() {
                if (num >= arr.length - 1) {
                    num = 0;
                } else {
                    num++;
                }
                console.log(num);
                oCont.innerHTML = arr[num];
            }, 100)
        }

        oBtn.onclick = function() {
            flag = !flag;
            oBtn.style = "box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
            clearInterval(t);
            if (!flag) {
                oBtn.style = "box-shadow: 0px 0px 10px blackt";
                set();
            }
        }
    </script>
</body>

</html>